<template>
  <div class="breadcrumb">
    <div class="container">
      <img class="zhuye" src="../assets/images/zy.png" alt="">
      <span v-for="(item, index) in breadcrumb" :key="index" @click="onSelect(item)">
        <b>{{ item.name }}</b>
        <img class="jiantou" v-if="index !== breadcrumb.length - 1" src="../assets/images/jiantou.png" alt="">
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Breadcrumb',
  props: {
    breadcrumb: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onSelect(item) {
      this.$emit('onClick', item)
    }
  }
}
</script>
<style lang="less" scoped>
.breadcrumb {
  // padding: 20px 0;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 90px;
  padding-bottom: 20px;
  .container{
    .zhuye{
      width: 20px;
      height: 20px;
    }
    span{
      cursor: pointer;
      b{
        font-size: 14px;
        color: #999;
        margin: 0 10px;
      }
      .jiantou{
        width: 10px;
        height: 10px;
      }
    }
  }
}
</style>